import React from "react";
import cx from "classnames";

export default ({ type, selected }) => (
  <div className={cx("CartPreview", { "CartPreview--Selected": selected })}>
    <svg
      width="96px"
      height="96px"
      viewBox="0 0 96 96"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="11.5"
          y="3.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="17.5"
          y="3.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="23.5"
          y="3.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="29.5"
          y="3.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="35.5"
          y="3.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="11.5"
          y="40.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="17.5"
          y="40.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="23.5"
          y="40.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="29.5"
          y="40.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="35.5"
          y="40.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="10.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="16.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="22.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="28.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="34.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="40.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="46.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="52.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="58.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="64.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="70.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="76.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="82.5"
          y="54.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(44.000000, 13.500000) rotate(-270.000000) translate(-44.000000, -13.500000) "
          x="42"
          y="10"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(44.000000, 19.500000) rotate(-270.000000) translate(-44.000000, -19.500000) "
          x="42"
          y="16"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(44.000000, 25.500000) rotate(-270.000000) translate(-44.000000, -25.500000) "
          x="42"
          y="22"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(44.000000, 31.500000) rotate(-270.000000) translate(-44.000000, -31.500000) "
          x="42"
          y="28"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(44.000000, 37.500000) rotate(-270.000000) translate(-44.000000, -37.500000) "
          x="42"
          y="34"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(7.000000, 13.500000) rotate(-270.000000) translate(-7.000000, -13.500000) "
          x="5"
          y="10"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(7.000000, 19.500000) rotate(-270.000000) translate(-7.000000, -19.500000) "
          x="5"
          y="16"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(7.000000, 25.500000) rotate(-270.000000) translate(-7.000000, -25.500000) "
          x="5"
          y="22"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(7.000000, 31.500000) rotate(-270.000000) translate(-7.000000, -31.500000) "
          x="5"
          y="28"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          transform="translate(7.000000, 37.500000) rotate(-270.000000) translate(-7.000000, -37.500000) "
          x="5"
          y="34"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="8.5"
          y="8.5"
          width="34"
          height="34"
        />
        <text
          fontFamily="HelveticaNeue, Helvetica Neue"
          fontSize="8"
          fontWeight="normal"
          fill="#000000"
        >
          <tspan x="14.164" y="28">
            {type === "03" || type === "02" ? "MBC1" : "MBC5"}
          </tspan>
        </text>
        <circle stroke="#979797" fill="#D8D8D8" cx="73.5" cy="27.5" r="19.5" />
        <circle stroke="#979797" fill="#979797" cx="73.5" cy="25.5" r="19.5" />
        <circle stroke="#979797" fill="#D8D8D8" cx="73.5" cy="25.5" r="17.5" />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="10.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="16.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="22.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="28.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="34.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="40.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="46.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="52.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="58.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="64.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="70.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="76.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="82.5"
          y="85.5"
          width="4"
          height="7"
        />
        <rect
          stroke="#979797"
          fill="#D8D8D8"
          x="8.5"
          y="59.5"
          width="80"
          height="28"
        />
        <text
          fontFamily="HelveticaNeue, Helvetica Neue"
          fontSize="8"
          fontWeight="normal"
          fill="#000000"
        >
          <tspan x="40.184" y="77">
            RAM
          </tspan>
        </text>
        <path
          d="M94.5,29.5 L94.5,20.5 L64,20.5 C63.1715729,20.5 62.5,21.1715729 62.5,22 L62.5,28 C62.5,28.8284271 63.1715729,29.5 64,29.5 L94.5,29.5 Z"
          stroke="#979797"
          fill="#D8D8D8"
        />
        {(type === "1A" || type === "02") && (
          <path
            d="M78,23 L98,23 L98,32 L78,32 L78,52 L69,52 L69,32 L49,32 L49,23 L69,23 L69,3 L78,3 L78,23 Z"
            fill="#CF0000"
            transform="translate(73.500000, 27.500000) rotate(-315.000000) translate(-73.500000, -27.500000) "
          />
        )}
      </g>
    </svg>
  </div>
);
